éè€ããCSSã«ã¹ã¿ã ãã€ã©ã€ãç¯å²ã®åŠçãæ·±ãæãäžããã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšå ç¢ãªã¢ããªã±ãŒã·ã§ã³éçºãä¿èšŒããŸãã
CSSã«ã¹ã¿ã ãã€ã©ã€ãã®ç¯å²ããŒãžïŒéè€ããéžæç¯å²ã®ãã³ããªã³ã°
WebããŒãžå ã®ç¹å®ã®ããã¹ãç¯å²ãèŠèŠçã«ããŒã¯ããã¹ã¿ã€ã«ãèšå®ããæ©èœã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããã³ã³ããã¹ããæäŸããããã®åŒ·åãªæ©èœã§ããããã¯å€ãã®å ŽåCSSã䜿çšããŠå®çŸãããCSS Highlight APIã®ç»å Žã«ãããéçºè ã¯ã«ã¹ã¿ã ããã¹ãã¹ã¿ã€ãªã³ã°ã«å¯ŸããŠåäŸã®ãªãå¶åŸ¡ãæã«å ¥ããŸããããããããããã®ã«ã¹ã¿ã ãã€ã©ã€ãç¯å²ãéè€ãå§ãããšãé倧ãªèª²é¡ãçããŸãããã®ããã°èšäºã§ã¯ãéè€ããCSSã«ã¹ã¿ã ãã€ã©ã€ãç¯å²ã®åŠçã®è€éããæ·±ãæãäžããã·ãŒã ã¬ã¹ã§çŽæçãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã確ä¿ããããã«ããããã®éžæç¯å²ãããŒãžããã³ç®¡çããããã®åºæ¬ååãæœåšçãªåé¡ããããŠå¹æçãªæŠç¥ãæ¢ããŸãã
CSS Highlight APIã®çè§£
éè€ç¯å²ã®è€éãã«é£ã³èŸŒãåã«ãCSS Highlight APIã®åºæ¬çãªçè§£ãæã€ããšãéèŠã§ãããã®APIã«ãããéçºè
ã¯ã«ã¹ã¿ã ãã€ã©ã€ãã¿ã€ããå®çŸ©ããWebããŒãžäžã®ç¹å®ã®ããã¹ãç¯å²ã«é©çšããããšãã§ããŸããéå®çãªã¹ã¿ã€ãªã³ã°ãªãã·ã§ã³ããæäŸãããã°ããŒãã«ã«é©çšããã::selectionã®ãããªåŸæ¥ã®CSSç䌌èŠçŽ ãšã¯ç°ãªããHighlight APIã¯ãã现ãããªå¶åŸ¡ãšãè€æ°ã®ç°ãªããã€ã©ã€ãã¿ã€ããç¬ç«ããŠç®¡çããèœåãæäŸããŸãã
CSS Highlight APIã®äž»èŠãªæ§æèŠçŽ ã¯æ¬¡ã®ãšããã§ãïŒ
- ãã€ã©ã€ãã¬ãžã¹ã㪠(Highlight Registry): ã«ã¹ã¿ã ãã€ã©ã€ãã¿ã€ãã宣èšãããã°ããŒãã«ãªã¬ãžã¹ããªã
- ãã€ã©ã€ããªããžã§ã¯ã (Highlight Objects): ç¹å®ã®ãã€ã©ã€ãã¿ã€ããšããã«é¢é£ããã¹ã¿ã€ãªã³ã°ã衚ãJavaScriptãªããžã§ã¯ãã
- Rangeãªããžã§ã¯ã (Range Objects): ãã€ã©ã€ãããããã¹ãã®éå§ç¹ãšçµäºç¹ãå®çŸ©ããæšæºã®DOM
Rangeãªããžã§ã¯ãã - CSSãããã㣠(CSS Properties): ç»é²ããããã€ã©ã€ãã¿ã€ãã«ã¹ã¿ã€ã«ãé©çšããããã«äœ¿çšããã
::highlight()ã®ãããªã«ã¹ã¿ã CSSããããã£ã
äŸãã°ãæ€çŽ¢çµæã®ããã«ç°¡åãªãã€ã©ã€ããäœæããã«ã¯ããsearch-resultããšããååã®ãã€ã©ã€ããç»é²ããããã«é»è²ã®èæ¯ãé©çšããããšãã§ããŸãããã®ããã»ã¹ã¯éåžžãæ¬¡ã®æé ãå«ã¿ãŸãïŒ
- ãã€ã©ã€ãã¿ã€ãã®ç»é²ïŒ
CSS.highlights.set('search-result', new Highlight(['range1', 'range2'])); - CSSã«ãŒã«ã®å®çŸ©ïŒ
::highlight(search-result) { background-color: yellow; }
ããã«ãããããã¥ã¡ã³ãå ã§èŠã€ãã£ãããŒã¯ãŒãããã€ã©ã€ããããªã©ããŠãŒã¶ãŒã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãããŒã¿åŠçã«åºã¥ããåçãªã¹ã¿ã€ãªã³ã°ãå¯èœã«ãªããŸãã
éè€ç¯å²ã®èª²é¡
ããã§åãäžããäžå¿çãªåé¡ã¯ã2ã€ä»¥äžã®ã«ã¹ã¿ã ãã€ã©ã€ãç¯å²ããå Žåã«ãã£ãŠã¯ç°ãªãã¿ã€ãã®ãã®ã§ãã£ãŠããåãããã¹ãã»ã°ã¡ã³ããå æããå Žåã«äœãèµ·ããããšããããšã§ããæ¬¡ã®ãããªã·ããªãªãèããŠã¿ãŸãããïŒ
- ãŠãŒã¶ãŒãããçšèªãæ€çŽ¢ããã¢ããªã±ãŒã·ã§ã³ããã¹ãŠã®åºçŸç®æããsearch-resultããã€ã©ã€ãã§åŒ·èª¿è¡šç€ºããã
- åæã«ãã³ã³ãã³ã泚éããŒã«ãç¹å®ã®ãã¬ãŒãºããcommentããã€ã©ã€ãã§åŒ·èª¿è¡šç€ºããã
ãã1ã€ã®åèªãæ€çŽ¢çµæã§ããããã€æ³šéä»ããã¬ãŒãºã®äžéšã§ããå Žåããã®ããã¹ãã¯2ã€ã®ç°ãªããã€ã©ã€ãã«ãŒã«ã®å¯Ÿè±¡ãšãªããŸããé©åãªåŠçããªããã°ãããã¯äºæž¬äžå¯èœãªèŠèŠççµæããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®äœäžã«ã€ãªããå¯èœæ§ããããŸãããã©ãŠã¶ã®ããã©ã«ãã®åäœã¯ãæåŸã«å®£èšãããã¹ã¿ã€ã«ãé©çšãããã以åã®ã¹ã¿ã€ã«ãäžæžããããããããã¯èŠèŠçã«ãã¡ãæ··ãã«ãªã£ããããããšããããŸãã
管çãããŠããªãéè€ã«ããæœåšçãªåé¡ïŒ
- èŠèŠçãªææ§ãïŒ ç«¶åããã¹ã¿ã€ã«ïŒäŸïŒç°ãªãèæ¯è²ãäžç·ããã©ã³ãã®å€ªãïŒã¯ãããã¹ããèªã¿ã«ããããããèŠèŠçã«æ··ä¹±ããããããå¯èœæ§ããããŸãã
- ã¹ã¿ã€ã«ã®äžæžãïŒ ãã€ã©ã€ããé©çšãããé åºã«ãã£ãŠãæçµçã«ã©ã®ã¹ã¿ã€ã«ãã¬ã³ããªã³ã°ãããããæ±ºãŸããéèŠãªæ å ±ãé ããŠããŸãå¯èœæ§ããããŸãã
- ã¢ã¯ã»ã·ããªãã£ãžã®æžå¿µïŒ ã¢ã¯ã»ã·ãã«ã§ãªãè²ã®çµã¿åãããã¹ã¿ã€ã«ã¯ãèŠèŠé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠããã¹ããèªã¿ã«ããããããã¯èªããªãããå¯èœæ§ããããŸãã
- ç¶æ 管çã®è€éãïŒ ãã€ã©ã€ããåçãªç¶æ ããŠãŒã¶ãŒã¢ã¯ã·ã§ã³ã衚ãå Žåãéè€æã®çžäºäœçšã管çããããšã¯ãéçºäžã®å€§ããªè² æ ãšãªããŸãã
éè€ç¯å²ãåŠçããããã®æŠç¥
éè€ããCSSã«ã¹ã¿ã ãã€ã©ã€ãç¯å²ã广çã«ç®¡çããã«ã¯ãæ éãªèšç»ãšå ç¢ãªå®è£ ãçµã¿åãããæŠç¥çãªã¢ãããŒããå¿ èŠã§ããç®æšã¯ãéè€ããã¹ã¿ã€ã«ã調åããŠããŒãžãããããè«ççã«åªå é äœä»ãããããäºæž¬å¯èœã§èŠèŠçã«äžè²«ããã·ã¹ãã ãäœæããããšã§ãã
1. åªå é äœã«ãŒã«
æãç°¡åãªã¢ãããŒãã®1ã€ã¯ãç°ãªããã€ã©ã€ãã¿ã€ãã«å¯ŸããŠæç¢ºãªéå±€ãŸãã¯åªå é äœãå®çŸ©ããããšã§ããéè€ãçºçããå Žåãæãåªå 床ã®é«ããã€ã©ã€ããåªå ãããŸãããã®åªå é äœã¯ã次ã®ãããªèŠå ã«ãã£ãŠæ±ºå®ã§ããŸãïŒ
- éèŠåºŠïŒ éèŠãªæ å ±ã®ãã€ã©ã€ãã¯ãæ å ±æäŸçãªãã€ã©ã€ããããé«ãåªå 床ãæã€ãããããŸããã
- ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ïŒ ãŠãŒã¶ãŒã«ãã£ãŠçŽæ¥æäœããããã€ã©ã€ãïŒäŸïŒçŸåšã®éžæç¯å²ïŒã¯ãèªååããããã€ã©ã€ããäžæžããããããããŸããã
- é©çšé åºïŒ ãã€ã©ã€ããé©çšãããé åºããåªå é äœä»ãã®ã¡ã«ããºã ãšããŠæ©èœããããšããããŸãã
å®è£ äŸïŒæŠå¿µïŒïŒ
2ã€ã®ãã€ã©ã€ãã¿ã€ããæ³åããŠã¿ãŠãã ããïŒãcritical-alertãïŒé«åªå 床ïŒãšãinfo-tipãïŒäœåªå 床ïŒã
ãã€ã©ã€ããé©çšããéããŸããã¹ãŠã®ç¯å²ãç¹å®ããŸããæ¬¡ã«ãéè€ããã»ã°ã¡ã³ãã«ã€ããŠãé¢äžãããã€ã©ã€ãã®åªå 床ã確èªããŸãããcritical-alertããšãinfo-tipããåãåèªã§éè€ããå Žåããã®åèªã«ã¯ãcritical-alertãã®ã¹ã¿ã€ã«ãæä»çã«é©çšãããŸãã
ããã¯ãJavaScriptã§ãã¹ãŠã®ç¹å®ãããç¯å²ãå埩åŠçããéè€é åã«ã€ããŠã¯ãäºåã«å®çŸ©ãããåªå 床ã¹ã³ã¢ãŸãã¯ã¿ã€ãã«åºã¥ããŠäž»èŠãªãã€ã©ã€ããéžæããããšã§ç®¡çã§ããŸãã
2. ã¹ã¿ã€ã«ã®ããŒãžïŒåæïŒ
å³å¯ãªåªå é äœä»ãã®ä»£ããã«ãéè€ãããã€ã©ã€ãããã®ã¹ã¿ã€ã«ãã€ã³ããªãžã§ã³ãã«ããŒãžãããããæŽç·Žãããã¢ãããŒããç®æãããšãã§ããŸããããã¯ãèŠèŠçãªå±æ§ãçµã¿åãããŠè€åçãªå¹æãçã¿åºãããšãæå³ããŸãã
ããŒãžã®äŸïŒ
- èæ¯è²ïŒ 2ã€ã®ãã€ã©ã€ããç°ãªãèæ¯è²ãæã€å Žåããããããã¬ã³ãããããšãã§ããŸãïŒäŸïŒã¢ã«ãã¡éæåºŠãè²æ··åã¢ã«ãŽãªãºã ã䜿çšïŒã
- ããã¹ãè£ é£ŸïŒ äžæ¹ã®ãã€ã©ã€ããäžç·ãé©çšããããäžæ¹ãåãæ¶ãç·ãé©çšãããããããŸãããããŒãžãããã¹ã¿ã€ã«ã«ã¯äž¡æ¹ãå«ãŸããå¯èœæ§ããããŸãã
- ãã©ã³ãã¹ã¿ã€ã«ïŒ 倪åãšæäœãçµã¿åãããããšãã§ããŸãã
ããŒãžã«äŒŽã課é¡ïŒ
- è€éãïŒ æ§ã ãªCSSããããã£ã«å¯ŸããŠå ç¢ãªããŒãžããžãã¯ãéçºããããšã¯è€éã«ãªãå¯èœæ§ããããŸãããã¹ãŠã®CSSããããã£ãç°¡åã«ããŒãžã§ããããã§ã¯ãããŸããã
- èŠèŠçãªäžè²«æ§ïŒ ããŒãžãããã¹ã¿ã€ã«ãå¿ ãããçŸçã«èŠããããæå³ããªãèŠèŠçãªã¢ãŒãã£ãã¡ã¯ããåŒãèµ·ãããããããšã¯éããŸããã
- ãã©ãŠã¶ãµããŒãïŒ ä»»æã®ã¹ã¿ã€ã«ã®çŽæ¥çãªCSSã¬ãã«ã§ã®ããŒãžã¯ãã€ãã£ãã§ã¯ãµããŒããããŠããŸãããããã«ã¯ãè€åã¹ã¿ã€ã«ãèšç®ããŠé©çšããããã«JavaScriptãå¿ èŠã«ãªãããšããããããŸãã
å®è£ ã¢ãããŒãïŒJavaScripté§åïŒïŒ
JavaScriptã«ãã解決çã«ã¯ã以äžãå«ãŸããŸãïŒ
- ããŒãžäžã®ãã¹ãŠã®ç°ãªããã€ã©ã€ãç¯å²ãç¹å®ããã
- ãããã®ç¯å²ãå埩åŠçããŠéè€ãæ€åºããã
- éè€ããåã»ã°ã¡ã³ãã«ã€ããŠãéè€ãããã€ã©ã€ãã«é¢é£ãããã¹ãŠã®CSSã¹ã¿ã€ã«ãåéããã
- ãããã®ã¹ã¿ã€ã«ãçµã¿åãããããã®ã¢ã«ãŽãªãºã ãéçºãããäŸãã°ã2ã€ã®èæ¯è²ãååšããå Žåããããã®ã¢ã«ãã¡å€ã«åºã¥ããŠå¹³åè²ãŸãã¯ãã¬ã³ãè²ãèšç®ãããããããŸããã
- èšç®ãããè€åã¹ã¿ã€ã«ãéè€ç¯å²ã«é©çšãããããã¯ãæ°ããäžæçãªãã€ã©ã€ããäœæãããããã®ç¹å®ã®ã»ã°ã¡ã³ãã®DOMã®ã€ã³ã©ã€ã³ã¹ã¿ã€ã«ãçŽæ¥æäœããããšã«ãã£ãŠè¡ãããå¯èœæ§ããããŸãã
äŸïŒèæ¯è²ã®ãã¬ã³ã
2ã€ã®ãã€ã©ã€ãããããšããŸãïŒ
- ãã€ã©ã€ãAïŒ
background-color: rgba(255, 0, 0, 0.5);ïŒåéæã®èµ€ïŒ - ãã€ã©ã€ãBïŒ
background-color: rgba(0, 0, 255, 0.5);ïŒåéæã®éïŒ
ããããéè€ãããšãäžè¬çãªãã¬ã³ãã¢ãããŒãã§ã¯çŽ«è²ã®ãããªè²ã«ãªããŸãã
function blendColors(color1, color2) {
// ããã«è€éãªè²æ··åããžãã¯ãå
¥ããŸãã
// RGBå€ãšã¢ã«ãã¡ãã£ã³ãã«ãèæ
®ããŸãã
// ç°¡åã®ãããåºæ¬çãªã¢ã«ãã¡ãã¬ã³ããæ³å®ããŸãã
const rgba1 = parseRGBA(color1);
const rgba2 = parseRGBA(color2);
const alpha = 1 - (1 - rgba1.a) * (1 - rgba2.a);
const r = (rgba1.r * rgba1.a + rgba2.r * rgba2.a * (1 - rgba1.a)) / alpha;
const g = (rgba1.g * rgba1.a + rgba2.g * rgba2.a * (1 - rgba1.a)) / alpha;
const b = (rgba1.b * rgba1.a + rgba2.b * rgba2.a * (1 - rgba1.a)) / alpha;
return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${alpha})`;
}
ãã®èšç®ãããè²ã¯ãéè€ããããã¹ãã»ã°ã¡ã³ãã«é©çšãããŸãã
3. ã»ã°ã¡ã³ããŒã·ã§ã³ãšåå²
ããã€ãã®è€éãªéè€ã·ããªãªã§ã¯ãæã广çãªè§£æ±ºçã¯ãéè€ããããã¹ãã»ã°ã¡ã³ãã现ååããããšãããããŸãããã¹ã¿ã€ã«ãããŒãžããããšãã代ããã«ãéè€ããããã¹ããããå°ããªãéè€ããªãã»ã°ã¡ã³ãã«åå²ããããããã«å ã®ãã€ã©ã€ãã¹ã¿ã€ã«ã®1ã€ã ããé©çšããããšãã§ããŸãã
ã·ããªãªïŒ
åèªãexampleãã2ã€ã®ç¯å²ã«ãã£ãŠéšåçã«ã«ããŒãããŠãããšããŸãïŒ
- ç¯å²1ïŒãexampleãã®å§ãŸãããå§ãŸããéäžã§çµããããã€ã©ã€ãã¿ã€ãXã
- ç¯å²2ïŒãexampleãã®éäžããå§ãŸããçµããã§çµããããã€ã©ã€ãã¿ã€ãYã
ãããããã®ç¯å²ãããŸããã¬ã³ãã§ããªã2ã€ã®ç°ãªããã€ã©ã€ãã¿ã€ãã®ãã®ã§ããã°ããexampleãããexaããšãmpleãã«åå²ããããšãã§ããŸããååã«ã¯ã¿ã€ãXã®ã¹ã¿ã€ã«ããåŸåã«ã¯ã¿ã€ãYã®ã¹ã¿ã€ã«ãé©çšãããŸãã
æè¡çå®è£ ïŒ
ããã«ã¯DOMããŒãã®æäœãå«ãŸããŸãã广çã«ããŒãžãŸãã¯åªå é äœä»ãã§ããªãéè€ãæ€åºãããå Žåããã©ãŠã¶ã®ããã¹ãããŒããåå²ããå¿ èŠããããããããŸãããäŸãã°ããexampleããå«ãåäžã®ããã¹ãããŒãã¯ã次ã®ããã«çœ®ãæããããå¯èœæ§ããããŸãïŒ
- ã¿ã€ãXã®ã¹ã¿ã€ãªã³ã°ãæã€ãexaãã®spanã
- ã¿ã€ãYã®ã¹ã¿ã€ãªã³ã°ãæã€ãmpleãã®spanã
ãã®ã¢ãããŒãã¯ãããã¹ãã®åã»ã°ã¡ã³ããåäžã®æç¢ºã«å®çŸ©ãããã¹ã¿ã€ã«ã®ã¿ã®å¯Ÿè±¡ãšãªãããšãä¿èšŒããã¬ã³ããªã³ã°ã®ç«¶åãé²ããŸãããã ããDOMã®è€éããå¢ããé床ã«è¡ããããšããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ããããŸãã
4. ãŠãŒã¶ãŒã³ã³ãããŒã«ãšã€ã³ã¿ã©ã¯ã·ã§ã³
ç¹å®ã®ã¢ããªã±ãŒã·ã§ã³ã§ã¯ãéè€ã®åŠçæ¹æ³ã«ã€ããŠãŠãŒã¶ãŒã«æç€ºçãªã³ã³ãããŒã«ãæäŸããããšã䟡å€ã®ããã¢ãããŒããšãªãå ŽåããããŸããããã«ããããŠãŒã¶ãŒã¯èªèº«ã®ç¹å®ã®ããŒãºã奜ã¿ã«åºã¥ããŠç«¶åã解決ããããšãã§ããŸãã
å¯èœãªã³ã³ãããŒã«ïŒ
- éè€ãããã€ã©ã€ãã®åãæ¿ãïŒ ãŠãŒã¶ãŒãç¹å®ã®çš®é¡ã®ãã€ã©ã€ããç¡å¹ã«ããŠç«¶åã解決ã§ããããã«ããã
- åªå é äœã®éžæïŒ ãŠãŒã¶ãŒãç¹å®ã®ã³ã³ããã¹ãå ã§ç°ãªããã€ã©ã€ãã¿ã€ãã®åªå é äœãèšå®ã§ããã€ã³ã¿ãŒãã§ãŒã¹ãæäŸããã
- èŠèŠçãªãã£ãŒãããã¯ïŒ éè€ãæ€åºãããå ŽåããŠãŒã¶ãŒã«ããã埮åŠã«ç€ºãã解決ããããã®ãªãã·ã§ã³ãæäŸããã
äŸïŒã³ãŒããšãã£ã¿ãŸãã¯ããã¥ã¡ã³ã泚éããŒã«
æŽç·Žãããããã¹ãç·šéç°å¢ã§ã¯ããŠãŒã¶ãŒã¯ã³ãŒãã®ã·ã³ã¿ãã¯ã¹ãã€ã©ã€ãããšã©ãŒãã€ã©ã€ããã«ã¹ã¿ã 泚éãé©çšãããããããŸãããããããéè€ããå ŽåãããŒã«ã¯æ¬¡ã®ããã«ããããšãã§ããŸãïŒ
- éè€é åã«ããŒã«ããããŸãã¯å°ããªã¢ã€ã³ã³ã衚瀺ããã
- ãããŒæã«ãã©ã®ãã€ã©ã€ããããã¹ãã«åœ±é¿ãäžããŠãããã衚瀺ããã
- ãã·ã³ã¿ãã¯ã¹ã衚瀺ãããšã©ãŒã衚瀺ããæ³šéã衚瀺ãã®ãã¿ã³ãæäŸããéžæçã«è¡šç€ºãŸãã¯é衚瀺ã«ããã
ãã®ãŠãŒã¶ãŒäžå¿ã®ã¢ãããŒãã¯ãè€éãªéè€ã·ããªãªã«ãããŠããæãéèŠãªæ å ±ãåžžã«è¡šç€ºãããè§£éå¯èœã§ããããšãä¿èšŒããŸãã
å®è£ ã®ãã¹ããã©ã¯ãã£ã¹
éžæããæŠç¥ã«é¢ããããããã€ãã®ãã¹ããã©ã¯ãã£ã¹ã¯ãCSSã«ã¹ã¿ã ãã€ã©ã€ãç¯å²ããŒãžã®å ç¢ã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªå®è£ ãä¿èšŒããã®ã«åœ¹ç«ã¡ãŸãïŒ
1. æç¢ºãªãã€ã©ã€ãã¿ã€ããšãã®ç®çãå®çŸ©ãã
ã³ãŒãã£ã³ã°ãå§ããåã«ãåã«ã¹ã¿ã ãã€ã©ã€ããäœã衚ãããã®éèŠæ§ãäœããæç¢ºã«å®çŸ©ããŸããããã¯ãåªå é äœä»ããããŒãžããŸãã¯ã»ã°ã¡ã³ãåã®æ±ºå®ã«åœ¹ç«ã¡ãŸãã
äŸïŒ
'search-match'ïŒãŠãŒã¶ãŒãç©æ¥µçã«æ€çŽ¢ããŠããçšèªçšã'comment-annotation'ïŒã¬ãã¥ãŒã¢ã®ã³ã¡ã³ããã¡ã¢çšã'spell-check-error'ïŒã¹ãã«ãã¹ã®å¯èœæ§ãããåèªçšã'current-user-selection'ïŒãŠãŒã¶ãŒãéžæããã°ããã®ããã¹ãçšã
2. Range APIã广çã«äœ¿çšãã
DOMã®Range APIã¯åºæ¬ã§ãã以äžã®ããšã«ç¿çããå¿
èŠããããŸãïŒ
- DOMããŒããšãªãã»ãããã
Rangeãªããžã§ã¯ããäœæããã - ç¯å²ãæ¯èŒããŠäº€å·®ãå å«ãæ€åºããã
- ããã¥ã¡ã³ãå ã®ç¯å²ãå埩åŠçããã
Range.compareBoundaryPoints()ã¡ãœãããdocument.body.getClientRects()ãŸãã¯element.getClientRects()ãä»ããå埩åŠçã¯ãç»é¢äžã®éè€é åãç¹å®ããã®ã«åœ¹ç«ã¡ãŸãã
3. ãã€ã©ã€ã管çãäžå åãã
ãã¹ãŠã®ã«ã¹ã¿ã ãã€ã©ã€ãã®ç»é²ãé©çšãããã³è§£æ±ºãåŠçããäžå åããããããŒãžã£ãŒãŸãã¯ãµãŒãã¹ãæã€ããšããå§ãããŸããããã«ãããããžãã¯ãæ£åšããã®ãé¿ããäžè²«æ§ã確ä¿ããŸãã
ãã®ãããŒãžã£ãŒã¯ããã¹ãŠã®ã¢ã¯ãã£ããªãã€ã©ã€ããããã«é¢é£ããç¯å²ãããã³ã¹ã¿ã€ãªã³ã°ã«ãŒã«ã管çããã¬ãžã¹ããªãç¶æããããšãã§ããŸããæ°ãããã€ã©ã€ãã远å ãŸãã¯åé€ããããšãéè€ãåè©äŸ¡ãã圱é¿ãåããããã¹ããåã¬ã³ããªã³ã°ãŸãã¯æŽæ°ããŸãã
4. ããã©ãŒãã³ã¹ãžã®åœ±é¿ãèæ ®ãã
ãã€ã©ã€ãã倿Žããããã³ã«é »ç¹ãªåã¬ã³ããªã³ã°ãè€éãªDOMæäœãè¡ããšãç¹ã«å€§éã®ããã¹ããæã€ããŒãžã§ã¯ããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ããããŸããéè€ãæ€åºããã³è§£æ±ºããããã®ã¢ã«ãŽãªãºã ãæé©åããŠãã ããã
- ãããŠã³ã¹/ã¹ããããªã³ã°ïŒ ãã€ã©ã€ãã®æŽæ°ãããªã¬ãŒããã€ãã³ããã³ãã©ïŒäŸïŒãŠãŒã¶ãŒã®ã¿ã€ãã³ã°ãæ€çŽ¢ã¯ãšãªã®å€æŽïŒã«ãããŠã³ã¹ãŸãã¯ã¹ããããªã³ã°ãé©çšããŠãåèšç®ã®é »åºŠãå¶éããŸãã
- å¹ççãªç¯å²æ¯èŒïŒ ç¯å²ã®æ¯èŒãšããŒãžã«æé©åãããã¢ã«ãŽãªãºã ã䜿çšããŸãã
- éžæçæŽæ°ïŒ ããŒãžå šäœã§ã¯ãªãã圱é¿ãåããDOMã®éšåã®ã¿ãåã¬ã³ããªã³ã°ããŸãã
5. ã¢ã¯ã»ã·ããªãã£ãåªå ãã
ãã€ã©ã€ãæŠç¥ãã¢ã¯ã»ã·ããªãã£ãæãªããªãããã«ããŠãã ãããéè€ããã¹ã¿ã€ã«ã¯ãäžååãªã³ã³ãã©ã¹ãæ¯ãäœæããããèŠèŠé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠããã¹ããäžæçã«ãããããŠã¯ãªããŸããã
- ã³ã³ãã©ã¹ããã§ãã¯ïŒ ããŒãžãŸãã¯åªå é äœä»ããããã¹ã¿ã€ã«ã®èæ¯ã«å¯Ÿããã³ã³ãã©ã¹ãæ¯ãããã°ã©ã ã§ç¢ºèªããŸãã
- è²ã ãã«äŸåããªãïŒ æ å ±ãäŒããããã«ãè²ã«å ããŠä»ã®èŠèŠçãªæãããïŒäŸïŒäžç·ã倪åãæç¢ºãªãã¿ãŒã³ïŒã䜿çšããŸãã
- ã¹ã¯ãªãŒã³ãªãŒããŒã§ãã¹ãããïŒ èŠèŠçãªãã€ã©ã€ãã¯äž»ã«èŠèŠãŠãŒã¶ãŒåãã§ãããã¹ã¯ãªãŒã³ãªãŒããŒãŠãŒã¶ãŒã®ããã«åºç€ãšãªãã»ãã³ãã£ãã¯æ§é ãä¿æãããŠããããšã確èªããŸãã
6. ç°ãªããã©ãŠã¶ãããã€ã¹ã§ãã¹ããã
CSS Highlight APIã®å®è£ ãšDOMæäœã¯ããã©ãŠã¶ã«ãã£ãŠè¥å¹²ç°ãªãå ŽåããããŸããããŸããŸãªãã©ãããã©ãŒã ãããã€ã¹ã§åŸ¹åºçã«ãã¹ãããäžè²«ããåäœã確ä¿ããããšãäžå¯æ¬ ã§ãã
å®äžçã®ã¢ããªã±ãŒã·ã§ã³ãšäŸ
éè€ããã«ã¹ã¿ã ãã€ã©ã€ãã®åŠçã¯ãããã€ãã®ã¢ããªã±ãŒã·ã§ã³ãã¡ã€ã³ã§éèŠã§ãïŒ
1. ã³ãŒããšãã£ã¿ãšIDE
ã³ãŒããšãã£ã¿ã¯ãã·ã³ã¿ãã¯ã¹ãã€ã©ã€ãããšã©ãŒ/èŠåã€ã³ãžã±ãŒã¿ããªã³ãã£ã³ã°ã®ææ¡ããŠãŒã¶ãŒå®çŸ©ã®æ³šéãªã©ãè€æ°ã®ãã€ã©ã€ãã¬ã€ã€ãŒãåæã«äœ¿çšããããšããããããŸããéè€ã¯äžè¬çã§ãããéçºè ãã³ãŒããç°¡åã«èªãã§çè§£ã§ããããã«ç®¡çããå¿ èŠããããŸãã
äŸïŒ 倿°åãã·ã³ã¿ãã¯ã¹ãã€ã©ã€ãã®ããŒã¯ãŒãã®äžéšã§ããããªã³ã¿ãŒã«ãã£ãŠæªäœ¿çšãšããŠãã©ã°ãç«ãŠãããããã«ãŠãŒã¶ãŒã远å ããã³ã¡ã³ããæ·»ä»ãããŠããå ŽåããããŸãããšãã£ã¿ã¯ãããããã¹ãŠã®æ å ±ãæç¢ºã«è¡šç€ºããå¿ èŠããããŸãã
2. ããã¥ã¡ã³ãã³ã©ãã¬ãŒã·ã§ã³ãšæ³šéããŒã«
Googleããã¥ã¡ã³ããå ±åç·šéããŒã«ã®ãããªãã©ãããã©ãŒã ã§ã¯ãè€æ°ã®ãŠãŒã¶ãŒãããã¥ã¡ã³ãã®ç¹å®ã®éšåã«ã³ã¡ã³ãããããç·šéãææ¡ãããããã€ã©ã€ããããã§ããŸããè€æ°ã®æ³šéãææ¡ãéè€ããå Žåãæç¢ºãªè§£æ±ºæŠç¥ãå¿ èŠã§ãã
äŸïŒ ãããŠãŒã¶ãŒã段èœãè°è«ã®ããã«ãã€ã©ã€ãããå¥ã®ãŠãŒã¶ãŒããã®æ®µèœå ã®æã«ç¹å®ã®ã³ã¡ã³ãã远å ãããããããŸãããã·ã¹ãã ã¯ãç«¶åãªãäž¡æ¹ã衚瀺ããå¿ èŠããããŸãã
3. é»åæžç±ãªãŒããŒãšããžã¿ã«æç§æž
ãŠãŒã¶ãŒã¯ãã°ãã°åŠç¿ã®ããã«ããã¹ãããã€ã©ã€ãããã¡ã¢ã远å ããæ€çŽ¢çµæã®ãã€ã©ã€ãã®ãããªæ©èœã䜿çšãããããããŸãããç°ãªãåŠç¿ã»ãã·ã§ã³ãæ©èœããã®éè€ãããã€ã©ã€ãã¯ãåªé ã«ç®¡çãããå¿ èŠããããŸãã
äŸïŒ åŠçãéèŠãªäžç¯ããã€ã©ã€ãããåŸã§æ€çŽ¢æ©èœã䜿çšããŠããã®æ¢ã«ãã€ã©ã€ããããäžç¯å ã®ããŒã¯ãŒãããã€ã©ã€ãããå Žåãé»åæžç±ãªãŒããŒã¯ãããæç¢ºã«è¡šç€ºãã¹ãã§ãã
4. ã¢ã¯ã»ã·ããªãã£ããŒã«
é害ãæã€ãŠãŒã¶ãŒãæ¯æŽããããã«èšèšãããããŒã«ã¯ãã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ãéèŠãªæ å ±ããŸãã¯èªã¿äžãè£å©ãªã©ãããŸããŸãªç®çã§ã«ã¹ã¿ã ãã€ã©ã€ããé©çšããããšããããŸãããããã¯ãä»ã®ããŒãžã³ã³ãã³ãããŠãŒã¶ãŒãé©çšãããã€ã©ã€ããšéè€ããå¯èœæ§ããããŸãã
5. æ€çŽ¢ããã³æ å ±æ€çŽ¢ã€ã³ã¿ãŒãã§ãŒã¹
ãŠãŒã¶ãŒã倧ããªããã¥ã¡ã³ããWebããŒãžå ã§æ€çŽ¢ãããšãæ€çŽ¢çµæã¯éåžžãã€ã©ã€ããããŸããããŒãžã«ä»ã®åçãªãã€ã©ã€ãã¡ã«ããºã ïŒäŸïŒé¢é£çšèªãæèã«é¢é£ããã¹ããããïŒãããå Žåãéè€ç®¡çãéµãšãªããŸãã
CSSã«ã¹ã¿ã ãã€ã©ã€ããšéè€åŠçã®æªæ¥
CSS Highlight APIã¯ãŸã é²åããŠãããããã«äŒŽããéè€ç¯å²ã®ãããªè€éãªã¹ã¿ã€ãªã³ã°ã·ããªãªãåŠçããããã®ããŒã«ãæšæºãé²åããŠããŸããAPIãæçããã«ã€ããŠïŒ
- ãã©ãŠã¶å®è£ ïŒ éè€ç®¡çã®ããã®ããå€ãã®çµã¿èŸŒã¿ãœãªã¥ãŒã·ã§ã³ãæäŸãããããå ç¢ã§æšæºåããããã©ãŠã¶å®è£ ãæåŸ ã§ããŸãã
- CSS仿§ïŒ å°æ¥ã®CSS仿§ã§ã¯ãéè€è§£æ±ºæŠç¥ã宣èšçã«å®çŸ©ããæ¹æ³ãå°å ¥ãããJavaScriptãžã®äŸåãæžå°ããå¯èœæ§ããããŸãã
- éçºè ããŒã«ïŒ ãã€ã©ã€ãã®éè€ãèŠèŠåãããããã°ããã®ã«åœ¹ç«ã€åŒ·åãããéçºè ããŒã«ãç»å Žããã§ãããã
ãã®åéã§ã®ç¶ç¶çãªéçºã¯ãWebã®ããã®ãã匷åã§æè»ãªããã¹ãã¹ã¿ã€ãªã³ã°æ©èœãããããããšãçŽæããŠãããéçºè ãæ å ±ãåžžã«ææ¡ãããã¹ããã©ã¯ãã£ã¹ãæ¡çšããããšãäžå¯æ¬ ã«ãªããŸãã
çµè«
éè€ããCSSã«ã¹ã¿ã ãã€ã©ã€ãç¯å²ã®åŠçã¯ãæ éãªæ€èšãšæŠç¥çãªå®è£ ãèŠæ±ãã埮åŠãªèª²é¡ã§ããCSS Highlight APIã®èœåãçè§£ããåªå é äœä»ããã€ã³ããªãžã§ã³ããªã¹ã¿ã€ã«ããŒãžãã»ã°ã¡ã³ããŒã·ã§ã³ããŸãã¯ãŠãŒã¶ãŒã³ã³ãããŒã«ãªã©ã®æè¡ãçšããããšã§ãéçºè ã¯æŽç·ŽããããŠãŒã¶ãŒãã¬ã³ããªãŒãªã€ã³ã¿ãŒãã§ãŒã¹ãäœæã§ããŸããéçºããã»ã¹å šäœãéããŠã¢ã¯ã»ã·ããªãã£ãããã©ãŒãã³ã¹ãããã³ã¯ãã¹ãã©ãŠã¶äºææ§ãåªå ããããšã§ããããã®é«åºŠãªã¹ã¿ã€ãªã³ã°æ©èœããå šäœçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæãªãã®ã§ã¯ãªããåäžãããããšãä¿èšŒãããŸããWebãé²åãç¶ããäžã§ãéè€ãããã€ã©ã€ãã®ç®¡çæè¡ãç¿åŸããããšã¯ãçŸä»£çã§é åçããã€ã¢ã¯ã»ã·ãã«ãªWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®éèŠãªã¹ãã«ãšãªãã§ãããã